<template>
  <div class="position">
    <!-- position职位的头部 -->
    <van-nav-bar left-text="人力资源管理实习生" left-arrow>
      <van-icon name="plus" slot="right" class="icon_left" @click="fabuxinxi"/>
      <van-icon name="search" slot="right" @click="isSeach=!isSeach" />
    </van-nav-bar>
    <div class="center_1">
      <van-search placeholder="请输入搜索关键词" v-model="keywords" v-show="isSeach" />
      <div class="position_line1">
        <div class="line1_left">
          <span class="recommed">推荐</span>
          <span>最新</span>
        </div>
        <div class="line1_right">
          <span @click="city_show">{{name_city}}</span>
        </div>
      </div>
      <div class="position_line2">
        <van-area :area-list="areaList" value="430000" @confirm="complete" v-show="flag" />
        <van-notice-bar text="邵阳学院的学生要毕业了,赶紧过去看看吧!" left-icon="volume-o" />
      </div>
      <!-- 主页招聘信息渲染渲染 -->
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="position_line3">
          <ul>
            <li v-for="el in seach(keywords)" :key="el.id" @click="getWorkInfo(el.id)">
              <div class="img_left">
                <img :src="el.img" alt />
              </div>
              <div class="img_right">
                <div class="top">
                  <span>
                    <b>{{el.name}}</b>
                  </span>
                  <span class="salary">{{el.money}}</span>
                </div>
                <div class="center">{{el.youdian}}</div>
                <div class="bottom">
                  <em>{{el.age}}</em>
                  <em>{{el.xueli}}</em>
                  <em>{{el.work}}</em>
                  <em>{{el.school}}</em>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
// 三级联动的城市定位选择js
import city from '../../data/city'
// 个人信息导入
import person from '../../data/person'
// import comment from '../../../components/comment'
export default {
  data: () => ({
    areaList: city, // 三级联动的城市
    personlist: person.data, // 个人信息
    flag: false,
    name_city: '大祥区',
    listdata: [], // 主页招聘信息
    isSeach: false,
    keywords: '',
    isLoading: false
  }),
  created () {
    this.getlists()
    this.$store.state.activeinfo = 0
    console.log(this.personlist)
    this.furong()
  },
  methods: {
    city_show () {
      this.flag = !this.flag
      this.furong()
    },
    complete (name) {
      this.flag = !this.flag
      // console.log(name)
      const [a, b, c] = name // 解构一下那个选中的地址
      this.name_city = c.name
    },
    // 发送请求
    async getlists () {
      const {
        data: { data, status }
      } = await this.$http.get('/lists')
      if (status !== 1) return console.log('请求数据失败')
      console.log(data)
      this.listdata = data

      // console.log(this.listdata[0].src)
    },
    // 发布招聘职位信息
    fabuxinxi () {
      this.$router.push('/myhome/mycompany')
    },
    getWorkInfo (id) {
      console.log(id)

      this.$router.push('/personnel/perfamation/' + id)
    },
    onRefresh () {
      setTimeout(() => {
        this.$toast('加载成功')
        this.isLoading = false
      }, 500)
    },
    seach (keywords) {
      return this.personlist.filter(item => {
        if (item.name.includes(keywords)) {
          return item
        }
      })
    },
    furong () {
      // console.log(this.name_city)
      // 求职地区筛选
      if (this.name_city === '芙蓉区') {
        this.personlist.length = 2
      } else if (this.name_city === '天心区') {
        this.personlist.length = 1
      } else {
        this.personlist.length = 11
      }
    }
  }
}
</script>
<style lang="less" scoped>
.position {
  .center_1 {
    padding-top: 46px;
  }
  // margin: 50px 0;
  .van-nav-bar {
    background: #4dd599;
    position: fixed;
    z-index: 1;
    width: 100%;
  }
  .van-nav-bar__text {
    font-size: 21px;
  }
  .van-nav-bar__right {
    font-size: 23px;
  }
  .position_line1 {
    display: flex;
    justify-content: space-between;
    height: 40px;
    width: 90%;
    line-height: 40px;
    margin: 0 auto;
    // color: #1989fa;
    z-index: 1;
    width: 100%;
    // padding-top: 46px;
    .line1_left {
      width: 90px;
      display: flex;
      justify-content: space-between;
      margin-left: 23px;
      font-weight: bold;
      .recommed {
        color: black;
        font-weight: bold;
      }
    }
    .line1_right {
      width: 112px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        display: block;
        border-radius: 6px;
        background: #eee;
        height: 35px;
        line-height: 35px;
        text-align: center;
        margin: auto;
        margin: auto;
        font-weight: bold;
        font-size: #4dd599;
        color: #4dd599;
        width: 72px;
      }
    }
  }
  .position_line3 {
    margin-bottom: 60px;
    li {
      height: 91px;
      border-bottom: 1px solid #eee;
      img {
        width: 59px;
        height: 59px;
        display: block;
        border: none;
        margin-left: 18px;
        margin-top: 16px;
        float: left;
        border-radius: 5px;
      }
      .img_right {
        margin-left: 96px;
        height: 100%;
        box-sizing: border-box;
        padding: 6px 0;
        .top {
          display: flex;
          justify-content: space-between;
          padding: 0px 12px 0 0;
        }
        .center {
          margin: 5px 0;
          font-size: 14px;
        }
        .bottom {
          em {
            font-style: normal;
            font-size: 12px;
            color: #8892ac;
            margin-right: 14px;
            display: inline-block;
          }
        }
        .salary {
          color: orange;
          font-size: 16px;
        }
      }
    }
  }
  .icon_left {
    margin: 1px 5px 3px 0px;
  }
}
.position .position_line3 li .img_right .center[data-v-4b98d772] {
  margin: 5px 0;
  font-size: 14px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.position .position_line3 li .img_right .bottom em:nth-child(3){
  font-size: 16px;
  color: red;
}
</style>
